<template>
	<view class="main">
		<view class="content">
			<!-- 头像修改 -->
			<view class="row list-item">
				<view class="col-xl-6 center">
					<view class="label">
						<text>头像</text>
					</view>
				</view>
				<view class="col-xl-6 center right">
					<view class="body">
						<button class="pic-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<img :src="userBackUps.avatarUrl" mode="widthFix">
						</button>
					</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="row list-item">
					<view class="col-xl-6 center">
						<view class="label">
							<text>昵称</text>
						</view>
					</view>
					<view class="col-xl-6 center right" @click="modifyNick">
						<view class="body">
							<text>{{userBackUps.nickName}}</text>
						</view>
					</view>
				</view>
				<view class="row list-item">
					<view class="col-xl-6 center">
						<view class="label">
							<text>真实姓名</text>
						</view>
					</view>
					<view class="col-xl-6 center right" @click="Identification">
						<view class="body">
							<text v-if="userBackUps.realInfomation.name">{{userBackUps.realInfomation.name}}</text>
							<text class="right-btn" v-else>去信息认证</text>
						</view>
					</view>
				</view>
				<view class="row list-item">
					<view class="col-xl-6 center">
						<view class="label">
							<text>性别</text>
						</view>
					</view>
					<view class="col-xl-6 center right">
						<view class="body">
							<text v-if="userBackUps.realInfomation">{{userBackUps.sex}}</text>
						</view>
					</view>
				</view>
				<view class="row list-item">
					<view class="col-xl-6 center">
						<view class="label">
							<text>手机号码</text>
						</view>
					</view>
					<view class="col-xl-6 center right" @click="modifyPhoen">
						<view class="body">
							<text class="right-btn" v-if="userBackUps.phone">{{userBackUps.phone}}</text>
							<text class="right-btn" v-else>绑定手机号</text>
						</view>
					</view>
				</view>
				<view class="row list-item">
					<view class="col-xl-6 center">
						<view class="label">
							<text>注销账户</text>
						</view>
					</view>
					<view class="col-xl-6 center right" @click="removeUser">
						<view class="body">
							<text class="right-btn"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="slot-bottom-btn-grop" :style="'bottom:' + safeAreaBottomHeight + 'px'">
				<view class="btn mrt-10">
					<u-button type="primary" text="保存" shape="circle" @click="save"></u-button>
				</view>
				<view class="btn mrt-10">
					<u-button type="primary" :plain="true" text="退出登录" shape="circle" @click="logout"></u-button>
				</view>
			</view>
		</view>
		<!-- 底部弹出窗 -->
		<u-popup :show="popupShow" :round="10" mode="bottom" @close="close" @open="open">
			<view class="popup-body">
				<u-input placeholder="请输入内容" border="surround" v-model="userInput" shape="circle"></u-input>
				<view class="btn mrt-20">
					<u-button type="success" text="确定" @click="onClick"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { getBarIconDistance } from '@/utils/utils.js';
	export default {
		computed: {
			...mapGetters(['user']), // 取出vuex中用户数据
		},
		data() {
			return {
				popupShow: false,
				userInput: '',
				safeAreaBottomHeight: 0,
				userBackUps: {}
				// avatarUrl: require("@/static/pic.jpg")
			}
		},
		methods: {
			getTopIconDistance() {
				this.safeAreaBottomHeight = getBarIconDistance() + 10;
			},
			// 更换头像
			onChooseAvatar(e) {
				let { avatarUrl } = e.detail;
				this.userBackUps.avatarUrl = avatarUrl;
				// this.$store.dispatch('user/chooseAvatar', avatarUrl);

			},
			// 修改昵称
			modifyNick() {
				console.log("修改昵称");
				this.popupShow = true;
				// 不需要调用
			},
			// 信息认证
			Identification() {
				console.log("身份认证");
				// 调用请求 信息认证

			},
			// 手机号修改
			modifyPhoen() {
				console.log("修改手机号");
			},
			// 注销
			removeUser() {
				console.log("注销");
				// 调用请求

			},
			open() {
				// console.log('open');
			},
			close() {
				this.popupShow = false
				this.userInput = ''
				// console.log('close');
			},
			onClick() {
				// 确认修改昵称
				this.userBackUps.nickName = this.userInput;
				this.close();
			},
			async save() {
				// 调用请求
				let res = await this.$store.dispatch('user/saveUserInfo', this.userBackUps);
				console.log(res);
				uni.showToast({
					title: `修改成功！`,
					icon: 'success',
					duration: 500
				});
				setTimeout(() => {
					uni.navigateBack(-1)
				}, 500)
			},
			logout() {
				// 登出
			}

		},
		created() {
			this.getTopIconDistance();
			this.userBackUps = Object.assign({}, this.user)
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
	}

	.list-item {
		padding: 15px;
		// height: 60rpx;
		background-color: var(--white);

		.center {
			display: flex;
			align-items: center;
		}

		.right {
			justify-content: flex-end;
		}

		.label {
			text {
				font-size: var(--font-size-default);
			}
		}

		.body {
			text {
				font-size: var(--font-size-default);
			}

			.pic-button {
				background: var(--white);
				// line-height: 60rpx;
				height: auto;
				width: auto;
				padding: 0;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				// border: 1px solid rgb(244, 244, 244);

				img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}
	}

	.list {
		margin-top: 20rpx;

		.list-item {
			border-bottom: 1px solid rgb(244, 244, 244);
			padding: 20px 15px;
			box-sizing: border-box;

			.body {
				.right-btn {
					position: relative;
					padding-right: 15px;
					color: var(--text-light);

					&:before {
						position: absolute;
						content: "";
						width: 10px;
						height: 10px;
						right: 0;
						transform: rotate(45deg);
						top: 3px;
						border-top: 2px solid rgb(225, 225, 225);
						border-right: 2px solid rgb(225, 225, 225);
					}
				}
			}
		}
	}

	.slot-bottom-btn-grop {
		padding: 15px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.popup-body {
		height: 280rpx;
		padding: 3vh;
		box-sizing: border-box;

		.btn {}
	}
</style>